<template>
  <div id="wrapper">
    <main>
      <div class="right-side">
        <div class="doc">
          <div class="title alt">{{ $t("buttonTips") }}</div>
        </div>
        <div class="doc">

          <el-button type="primary" round @click="StartServer">{{
            $t("buttons.startServer")
          }}</el-button>
          <el-button type="primary" round @click="StopServer">{{
            $t("buttons.stopServer")
          }}</el-button>
          <el-button type="primary" round @click="getMessage">{{
            $t("buttons.viewMessage")
          }}</el-button>
        </div>
        <div class="doc">
          <el-button type="primary" round @click="openNewWin">{{
            $t("buttons.openNewWindow")
          }}</el-button>
          <el-button type="primary" round @click="openDocument">{{
            $t("buttons.openDocument")
          }}</el-button>
          <el-button type="primary" round @click="changeLanguage">{{
            $t("buttons.changeLanguage")
          }}</el-button>
        </div>

      </div>
    </main>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'

import { ipcRenderer } from "electron";
export default {
  name: "Demo",

  data: () => ({

  }),
  created() {
    logger.info("环境打印示例",__dirname)

  },
  methods: {
    openNewWin() {
      let data = {  url: "/form/index"};
      ipcRenderer.invoke("open-win", data);
    },
    openDocument() {
      let data = {
        url: "/brower/index",
        webview: true,
        resizable: true,
        width: 600,
        height: 700,
      };
      ipcRenderer.invoke("open-win", data);
    },
    getMessage() {
     
    },
    StopServer() {
      ipcRenderer.invoke("stop-server").then((res) => {
        this.$message({   type: "success", message: "已关闭", });
      })
    },
    StartServer() {
      ipcRenderer.invoke("statr-server").then((res) => {
        if (res) { 
          this.$message({ type: "success", message: res, });
        }
      })
    },
    changeLanguage() {
      let lang = this.$i18n.locale === "zh-CN" ? "en" : "zh-CN";
      this.$i18n.locale = lang;
    },
  },
  destroyed() {
    console.log("销毁了哦");
    ipcRenderer.removeAllListeners("confirm-message");
    ipcRenderer.removeAllListeners("confirm-stop");
    ipcRenderer.removeAllListeners("confirm-start");
    ipcRenderer.removeAllListeners("confirm-download");

  },
  computed: {
    text() {
      return this.$i18n.t("waitDataLoading");
    },
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Source Sans Pro", sans-serif;
}

#wrapper {
  padding: 60px 80px;
}

#logo {
  height: auto;
  margin-bottom: 20px;
  width: 420px;
}

main {
  display: flex;
  justify-content: space-between;
}

main > div {
  flex-basis: 50%;
}

.left-side {
  display: flex;
  flex-direction: column;
}

.welcome {
  color: #555;
  font-size: 23px;
  margin-bottom: 10px;
}

.title {
  color: #2c3e50;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 6px;
}

.title.alt {
  font-size: 18px;
  margin-bottom: 10px;
}
.doc {
  margin-bottom: 10px;
}
.doc p {
  color: black;
  margin-bottom: 10px;
}
.doc .el-button {
  margin-top: 10px;
  margin-right: 10px;
}
.doc .el-button + .el-button {
  margin-left: 0;
}
.conten {
  text-align: center;
}
</style>
